{% extends 'base.html' %}

{% block title %}用户管理 - 请假审批系统{% endblock %}

{% block content %}
<div class="card">
    <div class="card-header">
        <h2>用户管理</h2>
        <p>管理系统用户的角色和权限</p>
    </div>

    <!-- 搜索和筛选表单 -->
    <form method="get" class="mb-4">
        <div style="display: grid; grid-template-columns: 2fr 1fr 1fr auto; gap: 1rem; align-items: end;">
            <div class="form-group" style="margin-bottom: 0;">
                <label for="{{ search_form.search.id_for_label }}">{{ search_form.search.label }}</label>
                {{ search_form.search }}
            </div>
            <div class="form-group" style="margin-bottom: 0;">
                <label for="{{ search_form.role.id_for_label }}">{{ search_form.role.label }}</label>
                {{ search_form.role }}
            </div>
            <div class="form-group" style="margin-bottom: 0;">
                <label for="{{ search_form.department.id_for_label }}">{{ search_form.department.label }}</label>
                {{ search_form.department }}
            </div>
            <div>
                <button type="submit" class="btn btn-primary">搜索</button>
                <a href="{% url 'user_management' %}" class="btn btn-secondary">重置</a>
            </div>
        </div>
    </form>

    <!-- 用户列表 -->
    <div style="overflow-x: auto;">
        <table class="table">
            <thead>
                <tr>
                    <th>工号</th>
                    <th>用户名</th>
                    <th>姓名</th>
{#                    <th>邮箱</th>#}
                    <th>部门</th>
                    <th>职位</th>
                    <th>角色</th>
                    <th>直属上级</th>
                    <th>年假天数</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
                {% for user in users %}
                <tr>
                    <td>{{ user.userprofile.employee_id|default:'-' }}</td>
                    <td>{{ user.username }}</td>
                    <td>{{ user.get_full_name|default:'-' }}</td>
{#                    <td>{{ user.email|default:'-' }}</td>#}
                    <td>{{ user.userprofile.department.name|default:'-' }}</td>
                    <td>{{ user.userprofile.position|default:'-' }}</td>
                    <td>
                        <span class="status-badge
                            {% if user.userprofile.role == 'admin' %}status-approved
                            {% elif user.userprofile.role == 'hr' %}status-supervisor-approved
                            {% elif user.userprofile.role == 'supervisor' %}status-submitted
                            {% else %}status-draft{% endif %}">
                            {{ user.userprofile.get_role_display }}
                        </span>
                    </td>
                    <td>
                        {% if user.userprofile.supervisor %}
                            {{ user.userprofile.supervisor.user.get_full_name|default:user.userprofile.supervisor.user.username }}
                        {% else %}
                            -
                        {% endif %}
                    </td>
                    <td>{{ user.userprofile.annual_leave_days }}</td>
                    <td>
                        <a href="{% url 'assign_role' user.id %}" class="btn btn-primary" style="padding: 0.5rem 1rem; font-size: 0.875rem;">
                            编辑角色
                        </a>
                    </td>
                </tr>
                {% empty %}
                <tr>
                    <td colspan="10" style="text-align: center; color: #666; padding: 2rem;">
                        没有找到用户
                    </td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>

    <!-- 分页 -->
    {% if is_paginated %}
    <div style="display: flex; justify-content: center; align-items: center; gap: 1rem; margin-top: 2rem;">
        {% if page_obj.has_previous %}
            <a href="?page=1{% if request.GET.search %}&search={{ request.GET.search }}{% endif %}{% if request.GET.role %}&role={{ request.GET.role }}{% endif %}{% if request.GET.department %}&department={{ request.GET.department }}{% endif %}" class="btn btn-secondary">首页</a>
            <a href="?page={{ page_obj.previous_page_number }}{% if request.GET.search %}&search={{ request.GET.search }}{% endif %}{% if request.GET.role %}&role={{ request.GET.role }}{% endif %}{% if request.GET.department %}&department={{ request.GET.department }}{% endif %}" class="btn btn-secondary">上一页</a>
        {% endif %}

        <span style="color: #666;">
            第 {{ page_obj.number }} 页，共 {{ page_obj.paginator.num_pages }} 页
        </span>

        {% if page_obj.has_next %}
            <a href="?page={{ page_obj.next_page_number }}{% if request.GET.search %}&search={{ request.GET.search }}{% endif %}{% if request.GET.role %}&role={{ request.GET.role }}{% endif %}{% if request.GET.department %}&department={{ request.GET.department }}{% endif %}" class="btn btn-secondary">下一页</a>
            <a href="?page={{ page_obj.paginator.num_pages }}{% if request.GET.search %}&search={{ request.GET.search }}{% endif %}{% if request.GET.role %}&role={{ request.GET.role }}{% endif %}{% if request.GET.department %}&department={{ request.GET.department }}{% endif %}" class="btn btn-secondary">末页</a>
        {% endif %}
    </div>
    {% endif %}
</div>

<!-- 角色说明 -->
<div class="card">
    <div class="card-header">
        <h3>角色权限说明</h3>
    </div>
    <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1rem;">
        <div class="stat-card">
            <div class="stat-number" style="color: #495057;">员工</div>
            <div class="stat-label">可以申请请假、查看自己的申请记录</div>
        </div>
        <div class="stat-card">
            <div class="stat-number" style="color: #0066cc;">主管</div>
            <div class="stat-label">可以审批下属的请假申请</div>
        </div>
        <div class="stat-card">
            <div class="stat-number" style="color: #155724;">人事</div>
            <div class="stat-label">可以审批所有请假申请、查看所有记录</div>
        </div>
        <div class="stat-card">
            <div class="stat-number" style="color: #0c5460;">管理员</div>
            <div class="stat-label">拥有所有权限，可以管理用户角色</div>
        </div>
    </div>
</div>
{% endblock %}
